import {Component} from 'react';
import {Card, Button} from 'antd';
import DataDetail from '~/component/DataDetail';
import {downloadReports} from '~/service/reports';

class CollectListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isDownLoading: false
        };
    }

    // 导出明细
    onDownloadReport = () => {
        const {queryParams} = this.props;
        // TODO: 需要添加校验逻辑
        this.setState({isDownLoading: true});
        downloadReports(queryParams, '课节汇总数据', () => {
            this.setState({isDownLoading: false});
        }).catch(() => {
            this.setState({isDownLoading: false});
        });
    };

    render() {
        const {isDownLoading} = this.state;
        const {isloading, dataSource, columns} = this.props;
        return (
            <Card
                title="课节数据汇总"
                className="collect-list-view"
                extra={(
                    <Button
                        onClick={this.onDownloadReport}
                        loading={isDownLoading}
                        disabled={!dataSource.length}
                    >
                        明细导出
                    </Button>
                )}
            >
                {/* 就是一个table */}
                <DataDetail
                    isLoading={isloading}
                    columns={columns}
                    dataSource={dataSource}
                    scroll={{x: 'max-content'}}
                />
            </Card>
        );
    }
}

export default CollectListView;
